<template>
    <div class="comment-container">
        <Transition name="mask">
          <div class="toast-mask" v-show="isShowError">{{ errorMsg }}</div>
        </Transition>

        <div class="reply-header">
          <div style="display: inline-block;width: 100px">
            <span class="nav-title-text">评论</span>
            <span class="total-reply">{{ $util.numChange(this.$store.state.commentsChange) }}</span>
          </div>
            <span :class="['total-latest',{'total-change':this.$store.state.latest}]" @click="clickLatest">最热</span>
            <span class="total-line">|</span>
            <span :class="['total-latest',{'total-change':!this.$store.state.latest}]" @click="clickLatest">最新</span>
        </div>
        <div class="reply-wrap">
            <!-- 主评论表情输入框 -->
            <EmojiText @comment="commentResult" :emojiSize="20"></EmojiText>

            <div class="reply-list">
                <!--  一级评论-->
              <div class="drawerBox" v-infinite-scroll="loadComment" style="overflow: auto"
                   :infinite-scroll-disabled="disabled"
                   infinite-scroll-distance="20"
                   >
                <div class="root-reply-item" v-for="(item,index) in commentList" :key="item.id">
                    <Transition name="mask">
                      <div class="delete-mask" v-show="this.$store.state.isShowDelete == item.id">
                        <div>
                          <div class="delete-mask-div1">
                            <span>删除评论后，评论下所有回复都会被删除是否继续?</span>
                          </div>
                          <div class="delete-mask-div2">
                            <el-button type="primary" size="small" @click="deleteComment(item)">确认</el-button>
                            <el-button plain size="small" @click="this.$store.state.isShowDelete = false">取消</el-button>
                          </div>
                        </div>
                      </div>
                    </Transition>
                    <div class="root-reply-container">
                        <div class="root-reply-avatar">
                          <el-popover trigger="hover" placement="top" :width="320" :height="180" popper-class="popperStyle">
                            <template #reference>
                              <div class="bili-avatar">
                                  <!--头像-->
                                  <img @click="$util.goPersonalHome(item.userId)" style="width: 40px;height: 40px;"
                                      :src="item.avatar == '' ? '' :$util.url.load + item.avatar" alt="">
                              </div>
                            </template>
                            <template #default>
                              <div style="height: 180px;">
                                <div style="height: 70px;"></div>
                                <div style="height: 110px;">
                                  <div class="popper-avatar-lower">
                                    <div class="root-reply-avatar">
                                      <div class="bili-avatar" style="margin-top: 10px">
                                        <!--头像-->
                                        <img @click="$util.goPersonalHome(item.userId)" style="width: 40px;height: 40px;"
                                             :src="item.avatar == '' ? '' :$util.url.load + item.avatar" alt="">
                                      </div>
                                    </div>
                                    <div style="margin: 10px 10px 0 80px">
                                      <p class="popper-avatar-p">{{item.nickName}}
                                        <!--性别：男-->
                                        <span v-if="item.sex === '1'" class="iconfont icon-xingbie1 popper-avatar-sex"></span>
                                        <!--性别：女-->
                                        <span v-else class="iconfont icon-xingbie popper-avatar-sex"></span>
                                        <span>
                                          <!--用户等级-->
                                          <user-level :userlevel="(item.level === undefined||item.level === null)?'0':(item.level+'')"></user-level>
                                        </span>
                                      </p>
                                      <ul class="popper-avatar-ul">
                                        <li class="popper-avatar-li">{{item.followsChange === null?0:item.followsChange}} <span class="popper-avatar-span">关注</span></li>
                                        <li class="popper-avatar-li">{{item.fansChange === null?0:item.fansChange}} <span class="popper-avatar-span">粉丝</span></li>
                                        <li class="popper-avatar-li">1234 <span class="popper-avatar-span">获赞</span></li>
                                      </ul>
                                    </div>
                                    <div class="popper-avatar-button">
                                      <el-button size="small" type="primary">＋ 关注</el-button>
                                      <el-button size="small">发消息</el-button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </template>
                          </el-popover>
                        </div>
                        <div @mouseover="this.$store.commit('changeMenuIndex',item.id)" @mouseout="this.$store.commit('outMenuShow')" class="content-wrap">
                            <div class="user-info">
                                <!--nickname 用户名 up名-->
                                <div class="user-name" @click="$util.goPersonalHome(item.userId)">{{ item.nickName }}</div>
                                <i class="iconfont icon-Lv" style="color: red;font-size: 20px;"></i>
                            </div>
                            <div class="root-reply" v-html="item.talkCopy"></div>
                            <div class="reply-info">
                              <!--时间-->
                              <span class="r-i-margin">{{ item.createdAtChange }}</span>
                              <!--点赞图标-->
                              <span class="iconfont icon-dianzan_selected hover-blue cursor-pointer" styleMark="false"
                                    @click="changeStyle('dianzan',index,item)" :ref="'dianzan'+index"></span>
                              <!--点赞数-->
                              <span style="margin-left: 5px">{{ (item.love===null||item.love==='0'||item.love===0)?'':item.love }}</span>
                              <span class="iconfont icon-dianzan_selected-copy r-i-margin-l hover-blue cursor-pointer" styleMark="false"
                                    @click="changeStyle('caizan',index,item)" :ref="'caizan'+index"></span>
                              <!--回复-->
                              <span class="hover-blue r-i-margin-l cursor-pointer" @click="[this.$store.commit('changeOneComment',item.id),replayObject(item.nickName)]">回复</span>
                              <!--删除、举报按钮-->
                              <div style="display: inline" v-show="item.id === this.$store.state.menuIndex">
                                <el-tooltip content="删除" placement="top">
                                  <span class="r-i-right hover-blue cursor-pointer">
                                    <i @click="this.$store.commit('changeShowDelete',item.id)" v-if="item.userId === this.$store.state.userInfo.userId" class="iconfont icon-shanchu"></i>
                                  </span>
                                </el-tooltip>
                                <el-tooltip content="举报" placement="top">
                                  <span class="r-i-right hover-blue cursor-pointer"><i v-if="item.userId != this.$store.state.userInfo.userId" class="iconfont icon-jubao1"></i></span>
                                </el-tooltip>
                              </div>
                            </div>
                        </div>
                    </div>
                    <!--二级评论-->
                    <CommentItem v-if="commentChildrenDisable" :ref="'childName'+item.id" :commentId="new Number(item.id)" :toReplayChildren="item.children" :toReplyTotalCount="new Number(item.replyTotalCount)"></CommentItem>
                    <!--回复评论 默认隐藏-->
                    <div style="margin: 10px 0 10px 80px" v-show="this.$store.state.commentOneShow === item.id">
                      <EmojiText @comment="commentChildrenResult" :placeholder="replayNickName" :commentListItem="item" :emojiSize="20"></EmojiText>
                    </div>
                    <!--底部线-->
                    <div class="bottom-line"></div>
                </div>
                <!--加载更多评论-->
                <div v-if="this.oneCommentCount > this.oneCommentSaveStep" class="reply-end">加载中.....</div>
                <div v-if="this.oneCommentCount < this.oneCommentSaveStep" class="reply-end">没有更多评论</div>
              </div>
            </div>
        </div>
    </div>
</template>
<script>

import {setCommentLike} from '/src/util/utilNext.js'
import CommentItem from "@/components/detailComponent/CommentItem";
import EmojiText from "@/components/detailComponent/EmojiText";

export default {
    name: 'commentContainer',
    components: { EmojiText, CommentItem},
    data() {
        return {
            // 一级评论数据 ”所有“
            commentList: [],
            comment: '', /*评论*/
            commentResp:'',/*回复评论*/
            // 一级、二级评论总数
            commentsChange: 0,
            isShowError: false,
            // 删除评论弹框
            isShowDelete:false,
            errorMsg: '',
            // 一级评论 加载变量
            oneCommentSaveStep:10,
            // 临时talk
            templeTalk:'',
            // 回复一级评论
            replayNickName:'',
            // 一级评论总数
            oneCommentCount:0,
            // 是否禁用v-infinite-scroll加载
            disabled:false,
            offset:0,
            commentChildrenDisable:true

        }
    },
    created() {
    },
    mounted() {
      this.$bus.on('changeCommentOneByLogin',()=>{
        this.resetComment()
        this.loadComment()
        if (this.commentList === undefined||this.commentList.length <= 0) return
        this.commentList.forEach(item=>{
          eval('this.$refs.childName'+item.id).firstGetCommentChildren()
        })
      })
      this.$bus.on('changeCommentOneByLogout',()=>{
        this.resetComment()
        this.loadComment()
      })
    },
    /**之所以清除bus的自定义事件，是因为bus的自定义事件是基于“发布订阅”模式的。当我们没有清除自定义事件，就会在页面离开再进入后就会触发$on，
     就会给事件队列中添加一个refreshGroupList事件，每次离开页面再进入都会添加，所有$emit触发的时候都会多执行一次自定义事件的回调函数。*/
    // sTODO onUnmounted()好像没有执行？？？
    onUnmounted(){
      this.$bus.off('changeCommentOneByLogin')
      this.$bus.off('changeCommentOneByLogout')
    },
    methods: {
        // 评论最热最新
        clickLatest(){
          this.$store.commit('changeLatest',!this.$store.state.latest)
          // 重置评论数组
          this.commentList = []
          this.getComment(10)
        },
        resetComment(){
          this.commentList = []
          this.oneCommentSaveStep = 10
          this.oneCommentCount = 0
          this.disabled = false
          this.offset = 0
          this.$store.commit('changeLatest',false)
        },
        /**删除评论*/
        async deleteComment(item){
          let res = await this.$util.get('hilihili/comment/deleteComment', {id:item.id, originId:item.originId})
          // token过期，重新登录
          if (res.code == 401) {
            this.$store.commit('logout')
            this.$store.commit('changeLogView')
            return
          }
          if (res.code != 200){
            this.showErrorMsg("评论删除失败")
            this.$store.commit('closeShowDelete')
          }else {
            this.showErrorMsg("删除成功")
            this.$store.commit('closeShowDelete')
            // 移除评论数组
            this.commentList = this.commentList.filter(obj => obj.id != item.id)
          }
          this.$store.commit('saveCommentTotal',this.$store.state.commentsChange-1)
        },

        replayObject(nickName){
          if (this.$store.state.userInfo === undefined || this.$store.state.userInfo === ''){
            this.showErrorMsg("您还没有登录")
            return
          }
          this.replayNickName = '回复: '+nickName
        },
        /** 添加一级评论 */
        commentResult(content) {
          this.comment = content
          //console.log("commentResult",this.comment)
          this.submitComment(false,null)
        },
        /** 添加子评论 */
        commentChildrenResult(content,item) {
          this.commentResp = content
          //console.log("commentChildrenResult",this.commentResp)
          this.submitComment(true,item)
        },
        // 显示信息
        showErrorMsg(msg) {
          this.errorMsg = msg
          this.isShowError = true
          setTimeout(() => {
            this.isShowError = false
          }, 2000)
        },
        /**此方法会立刻调用 一级评论滚动 无限加载*/
        loadComment(){
          if (this.oneCommentCount == 0){
            this.getComment(10)
          }else {
            if (this.oneCommentCount < this.oneCommentSaveStep) {
              this.disabled = true
            }else {
              this.oneCommentSaveStep += 10
              this.offset += 10
              this.getComment(this.oneCommentSaveStep)
            }
          }
        },
        /**获取评论*/
        async getComment(oneCommentSaveStep) {
            let res
            // 获取一级评论数
            res = await this.$util.get('hilihili/comment/getCommentByvideo' ,
                { videoId: this.$route.params.id, oneCommentSaveStep: oneCommentSaveStep,latest:this.$store.state.latest})
            if (res.code != 200) {
              console.log("获取评论失败",res.msg)
              return
            }
            // res.data.commentsChange（一级+二级）评论的数量
            if (res.data.commentsChange == 0) {
              this.disabled = true
              return
            }

            this.oneCommentCount = res.data.oneCommentCount
            if (res.data.commentList === undefined || res.data.commentList.length <= 0) return
            // 保存评论总数
            this.$store.commit('saveCommentTotal',parseInt(res.data.commentsChange))
            // let tempList = res.data.commentList.splice(this.offset,10)
            res.data.commentList.forEach(item => {
              // 解决follows、fans前后端类型不匹配问题
              item.followsChange = this.$util.numChange(item.follows)
              item.fansChange = this.$util.numChange(item.fans)
            })
            //TODO 一级评论用分段查询时，当用户退出、登录 this.commentList数组再次查询时重复赋值了，所以这里没有用分段查询
            this.commentList = res.data.commentList
            // 判断用户是否点赞了评论
            if (res.data.commentLikeUsers === undefined || res.data.commentLikeUsers === null || res.data.commentLikeUsers.length <= 0) return
            //console.log("已经点赞评论id集合",res.data.commentLikeUsers)
            this.$store.commit('saveCommentLikeUsers',res.data.commentLikeUsers)
            let commentIdList = setCommentLike(this.commentList,res.data.commentLikeUsers)
            //console.log("一级评论",this.commentList)
            //console.log("需要修改的下标",commentIdList)
            if (commentIdList === undefined || commentIdList.length <= 0) return
            // console.log('commentIdList',commentIdList)
            // 该用户在当前评论数组中有点赞过某个评论
            this.commentLikeUsersCommon(commentIdList,'#00aeec','true')

        },
        commentLikeUsersCommon(commentIdList,color,real){
          for (let i = 0; i < this.commentList.length; i++) {
            for (let j = 0; j < commentIdList.length; j++) {
              if (commentIdList[j] === i){
                this.$nextTick(()=> {
                  // 改变点赞样式
                  try {
                    if (eval('this.$refs.dianzan' + i)[0].style === undefined) return
                    eval('this.$refs.dianzan' + i)[0].style.color = color
                    eval('this.$refs.dianzan' + i)[0].attributes[2].nodeValue = real
                  }catch (e){
                    console.log(e)
                  }
                })
              }
            }
          }
        },
        /**提交一级评论*/
        async submitComment(bool,obj) {
            let res
            if (!bool){// 一级评论
              if (!this.comment) return
              this.templeTalk = this.comment
              res = await this.$util.post('hilihili/comment/addComment', { videoId: this.$route.params.id, userId: this.$store.state.userInfo.userId, talk: this.comment })
            }else{ // 回复评论
              if (!this.commentResp) return
              this.templeTalk = this.commentResp
              obj.talk = this.commentResp
              obj.createdAt = ''
              obj.videoId = this.$route.params.id
              res = await this.$util.post('hilihili/comment/addComment', obj)
            }
            this.commentResp = ''
            this.comment = ''
            // token过期，重新登录
            if (res.code == 401) {
                this.$store.commit('logout')
                this.$store.commit('changeLogView')
                return
            }
            if (res.code != 200) return
            if (!bool){// 一级评论
              let newComment = {
                id: res.data.id,
                userId: this.$store.state.userInfo.userId,
                avatar: this.$store.state.userInfo.avatar,
                nickName: this.$store.state.userInfo.nickName,
                createdAtChange: "刚刚",
                love:0,
                talkCopy: this.templeTalk,
                sex: this.$store.state.userInfo.sex,
                followsChange: this.$util.numChange(this.$store.state.userInfo.follows),
                fansChange: this.$util.numChange(this.$store.state.userInfo.fans),
              }
              this.commentList.unshift(newComment)
            }else {
              // 通过ref获取子组件所有的方法和属性
              let ref = eval('this.$refs.childName'+obj.id)[0]
              // console.log("ref",ref)
              let newComment = {
                id: res.data.id,
                userId: this.$store.state.userInfo.userId,
                avatar: this.$store.state.userInfo.avatar,
                nickName: this.$store.state.userInfo.nickName,
                createdAtChange: "刚刚",
                talkCopy: this.templeTalk,
                sex: this.$store.state.userInfo.sex,
                followsChange: this.$util.numChange(this.$store.state.userInfo.follows),
                fansChange: this.$util.numChange(this.$store.state.userInfo.fans),
                love:0,
                videoId : this.$route.params.id,
                pid: res.data.pid,
                originId: res.data.originId,
              }
              if (ref.replayChildren){
                ref.replayChildren.unshift(newComment)
              }else {
                let array = []
                array.push(newComment)
                /*通过ref获取子组件 并调用子组件方法 给replayChildren[]赋值*/
                ref.updateReplayChildren(array)
              }
            }
            this.$store.commit('saveCommentTotal',parseInt(this.$store.state.commentsChange)+1)
            this.showErrorMsg('发送成功')
            // 完成评论关闭评论框
            this.$store.commit('outOneAndTwoComment')
        },

        /** 修改点赞、踩赞样式*/
        changeStyle(str,id,item){
          if(this.$store.state.userInfo === undefined||this.$store.state.userInfo.userId === undefined) {
            this.showErrorMsg('您还未登录')
            return
          }
          if (str === 'caizan'){
            this.$nextTick(()=>{
              if (eval('this.$refs.'+str+id)[0] != undefined) {
                if (eval('this.$refs.dianzan'+id)[0].attributes[2].nodeValue === 'true'){
                  // 取消点赞
                  let data = this.updateLike(item,-1)
                  if(data <= 1) return
                  // 点赞数减一
                  this.commentList[id].love = parseInt(this.commentList[id].love)-1
                  eval('this.$refs.dianzan'+id)[0].style.color = 'rgb(148,153,160)'
                  eval('this.$refs.dianzan'+id)[0].attributes[2].nodeValue = 'false'
                }
                if (eval('this.$refs.'+str+id)[0].attributes[2].nodeValue === 'false'){
                  eval('this.$refs.'+str+id)[0].style.color = '#00aeec'
                  eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'true'
                }else {
                  eval('this.$refs.'+str+id)[0].style.color = 'rgb(148,153,160)'
                  eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'false'
                }
              }
            })
          }else {
            //console.log("点赞逻辑")
            this.$nextTick(()=>{
              if (eval('this.$refs.'+str+id)[0] != undefined) {
                if (eval('this.$refs.caizan'+id)[0].attributes[2].nodeValue === 'true'){
                  // 取消踩赞
                  eval('this.$refs.caizan'+id)[0].style.color = 'rgb(148,153,160)'
                  eval('this.$refs.caizan'+id)[0].attributes[2].nodeValue = 'false'
                }
                // 是否点赞
                if (eval('this.$refs.'+str+id)[0].attributes[2].nodeValue === 'false'){
                  // 修改数据库
                  let data = this.updateLike(item,1)
                  if(data <= 1) return
                  eval('this.$refs.'+str+id)[0].style.color = '#00aeec'
                  eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'true'
                  // 点赞数加一
                  this.commentList[id].love = this.commentList[id].love===null?1:parseInt(this.commentList[id].love)+1
                  //console.log("新增点赞成功，执行sql条数：",data)
                }else {
                  let data = this.updateLike(item,-1)
                  if(data <= 1) return
                  eval('this.$refs.'+str+id)[0].style.color = 'rgb(148,153,160)'
                  eval('this.$refs.'+str+id)[0].attributes[2].nodeValue = 'false'
                  this.commentList[id].love = parseInt(this.commentList[id].love)-1
                  //console.log("删除点赞成功，执行sql条数：",data)
                }
              }
            })
          }
        },
        /**修改数据库点赞数*/
        async updateLike(item,setValue){
          let res = await this.$util.get('hilihili/comment/updateLike' ,{ videoId:this.$route.params.id, commentId:item.id, setValue})
          if (res.code != 200) {
            console.log(res.msg)
            return
          }
          return res.data
        }
    },

}
</script>

<style>
/*修改el-popper样式 在<style scoped>中样式不生效*/
.el-popover.popperStyle{
  overflow: hidden;
  border-radius: 8px;
  background-image: url("/src/assets/img/avatar-top.jpg");
  background-size: 100%;
}
</style>
<style scoped>
.popper-avatar-span {
  color: rgb(148, 153, 160);
}
.popper-avatar-lower {
  position: absolute;left: 0;height: 115px;width: 320px;background-color: #ffffff;
}
.popper-avatar-li {
  margin-right: 10px
}
.popper-avatar-ul {
  font-size: 13px;display: flex
}
.popper-avatar-button {
  position: absolute;top:75px; left:88px;
}
.popper-avatar-p {
  font-size: 16px;margin-bottom: 10px
}
.popper-avatar-sex {
  font-size: 12px;color: #00AEEC
}
.toast-mask {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  background: rgba(51, 51, 51, .8);
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
  color: #fff;
}
/*删除框*/
.delete-mask{
  position: fixed;
  padding:15px 20px;
  width: 260px;
  height: 130px;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  background-color: rgb(255,255,255);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  /*background: rgba(51, 51, 51, .8);*/
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
}
.delete-mask-div1{
  height: 70%;
  width: 100%;
  display: block;
}
.delete-mask-div2{
  height: 30%;
  width: 100%;
  display: block;
  margin-top: 15px;
}
.root-bottom-query{
  font-size: 13px;
  color: rgb(148, 153, 160);
  margin: 10px 0 0 80px;
}
.root-bottom-query span:hover{
  cursor:pointer;
  color: rgb(64, 197, 241);
}
.popover{
  position: absolute;
  right: 15px;
  width: 100px;
  text-align: center;
  border: 0;
  border-radius: 3px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.cursor-pointer{
  cursor:pointer;
}
.cursor-bgcolor:hover{
  background-color: rgb(241,242,243);
}
.reply-header {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.nav-title-text {
    font-weight: 500;
    font-size: 20px;
    color: black;
}

.total-reply {
    font-size: 14px;
    margin-left: 10px;
    color: rgb(148, 153, 160);
}
.total-line{
  margin: 0 10px;
  font-size: 14px;
  color: rgb(148, 153, 160);
}
.total-change{
  font-size: 14px;
  color: rgb(148, 153, 160);
}
.total-latest{
  font-size: 14px;
  cursor: pointer;
}

.main-reply-box {
    display: flex;
    height: 50px;
}


.reply-box-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 50px;
}

.bili-avatar {
    display: block;
    position: relative;
    background-image: url();
    background-size: cover;
    border-radius: 50%;
}

.bili-user-avatar {
    display: block;
    position: relative;
    background-size: cover;
    /* background-color: transparent; */
    border-radius: 50%;
    overflow: hidden;
    height: 40px;
    width: 40px;
}

.reply-box-wrap {
    position: relative;
    flex: 1;
}

.reply-box-textarea {
    font-size: 13px;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    border: 1px solid var(--Ga1);
    border-radius: 6px;
    background-color: rgb(241, 242, 243);
    font-family: inherit;
    line-height: 38px;
    color: black;
    resize: none;
    outline: none;
}


.no-login-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    font-size: 12px;
    background-color: rgb(241, 242, 243);
    cursor: pointer;
}

.no-login-span {
    padding-left: 5px;
    padding-right: 5px;
}


.no-login-btn {
    padding: 4px 9px;
    border-radius: 4px;
    color: white;
    background: rgb(0, 174, 236);
}

.no-login-btn:hover {
    background-color: rgb(64, 197, 241);
}

.reply-list {
    /*margin-top: 14px;*/
    /*padding-bottom: 100px;*/
}

.reply-end {
    margin-top: 20px;
    font-size: 13px;
    color: rgb(148, 153, 160);
    text-align: center;
    cursor: default;
}
.reply-end-style:hover{
  cursor: pointer;
  color: rgb(64, 197, 241);;
}
.root-reply-container {
    padding: 22px 0 0 80px;
}
.root-reply-container2 {
    padding: 15px 0 0 130px;
}

.root-reply-item {
    position: relative;
}
.drawerBox {
  height: 650px;
}
/*去除滚动条显示*/
.drawerBox::-webkit-scrollbar{
  display:none
}

.root-reply-avatar {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0px;
    width: 80px;
    cursor: pointer;
}
.root-reply-avatar2 {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 80px;
    width: 40px;
    cursor: pointer;
}

.root-reply-avatar .bili-avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.root-reply-avatar2 .bili-avatar {
    width: 30px;
    height: 30px;
    overflow: hidden;
}

.content-wrap {
    position: relative;
    /*height: 20px;*/
}

.user-info {
    display: flex;
    align-items: center;
    /*margin-bottom: 4px;*/
    font-size: 13px;
}

.user-info2{
  align-items: center;
  /*margin-bottom: 4px;*/
  font-size: 13px;
}
.layer-two-name{
  font-weight: 500;
  margin-right: 5px;
  color: rgb(148, 153, 160);
  /*只有六级用户才是红色*/
  /*color: rgb(251, 114, 153);*/
  cursor: pointer;
}
.layer-two-talk{
  font-size: 15px;
  line-height: 24px;
  /*padding: 2px 0;*/
  color: black;
  letter-spacing:1px;
}
.user-name {
    font-weight: 500;
    margin-right: 5px;
    color: rgb(148, 153, 160);
    /*只有六级用户才是红色*/
    /*color: rgb(251, 114, 153);*/
    cursor: pointer;
}

.root-reply {
    font-size: 15px;
    line-height: 24px;
    padding: 2px 0;
    color: black;
    letter-spacing:1px;
}

.reply-info {
    /*margin-top: 2px;*/
    font-size: 13px;
    line-height: 24px;
    color: rgb(148, 153, 160)
}
.r-i-margin{
  margin-right: 20px;
}
.r-i-margin-l{
  margin-left: 20px;
}
.r-i-right{
  float: right;
  cursor:pointer;
}
.bottom-line {
    margin-left: 80px;
    border-bottom: 1px solid #ccc;
    margin-top: 14px;
}

.reply-box-send {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 70px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.send-text {
    color: #fff;
}

.no-login-box-send {
    background-color: #f1f2f3;
    cursor: not-allowed;
}

.no-login-send-text {
    color: rgb(148, 153, 160);
}
</style>

